import React, { useEffect, useState } from 'react';

interface FileMessageProps {
	type?: string;
	fileName?: string;
	fileUrl?: string;
	onClick?: (fileUrl: string, fileName: string) => void;
}

const FileMessage = (props: FileMessageProps) => {
	const { type, fileName, fileUrl, onClick } = props;
	const [fileIcon, setFileIcon] = useState('');
	useEffect(() => {
		switch (type) {
			case 'pdf':
				setFileIcon('icon-widget-a-bianzu6');
				break;
			case 'xlsx':
				setFileIcon('icon-widget-a-bianzu5');
				break;
			case 'doc':
				setFileIcon('icon-widget-a-bianzu43');
				break;
			case 'docx':
				setFileIcon('icon-widget-a-bianzu43');
				break;
			case 'zip':
				setFileIcon('icon-widget-a-bianzu7');
				break;
			case 'rar':
				setFileIcon('icon-widget-a-bianzu7');
				break;
			case 'mp4':
				setFileIcon('icon-widget-a-bianzu8');
				break;
			case 'mov':
				setFileIcon('icon-widget-a-bianzu8');
				break;
			case 'wave':
				setFileIcon('icon-widget-a-bianzu9');
				break;
			case 'wav':
				setFileIcon('icon-widget-a-bianzu9');
				break;
			case 'mp3':
				setFileIcon('icon-widget-a-bianzu9');
				break;
			case 'wma':
				setFileIcon('icon-widget-a-bianzu9');
				break;
			default:
				setFileIcon('icon-widget-qita');
				break;
		}
	}, [type]);
	return (
		<div className="file-message-container" onClick={() => onClick!(fileUrl!, fileName!)}>
			<div className="file-message-name">{fileName}</div>
			<div className="file-message-icon">
				<svg className="widget-icon" aria-hidden="true">
					<use xlinkHref={`#${fileIcon}`}></use>
				</svg>
			</div>
		</div>
	);
};

export default FileMessage;
